import 'package:flutter/material.dart';

class GestureDetectorTestRoute extends StatefulWidget {
  @override
  _GestureDetectorTestRouteState createState() =>
      new _GestureDetectorTestRouteState();
}

class _GestureDetectorTestRouteState extends State<GestureDetectorTestRoute> {
  String _operation = "No Gesture detected!"; //保存事件名

  double _top = 0.0; //A距顶部的偏移
  double _left = 0.0; //距左边的偏移

  double _top1 = 0.0; //B距离顶部的偏移

  double _width = 200.0; //通过修改图片宽度来达到缩放效果

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('手势识别GestureDetector'),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '单击、双击、长按',
                style: TextStyle(color: Colors.blue, fontSize: 20.0),
              ),
              GestureDetector(
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.blue,
                  width: 200.0,
                  height: 100.0,
                  child: Text(
                    _operation,
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                onTap: () => updateText("Tap"), //点击
                onDoubleTap: () => updateText("DoubleTap"), //双击
                onLongPress: () => updateText("LongPress"), //长按
              ),
              Text(
                '拖动、滑动',
                style: TextStyle(color: Colors.blue, fontSize: 20.0),
              ),
              Container(
                color: Colors.grey,
                width: 400.0,
                height: 200.0,
                child: Stack(
                  children: <Widget>[
                    Text('拖动区域400×200'),
                    Positioned(
                      top: _top,
                      left: _left,
                      child: GestureDetector(
                        child: CircleAvatar(child: Text("A")),
                        //手指按下时会触发此回调
                        onPanDown: (DragDownDetails e) {
                          //打印手指按下的位置(相对于屏幕)
                          print("用户手指按下：${e.globalPosition}");
                        },
                        //手指滑动时会触发此回调
                        onPanUpdate: (DragUpdateDetails e) {
                          //用户手指滑动时，更新偏移，重新构建
                          setState(() {
                            _left += e.delta.dx;
                            _top += e.delta.dy;
                          });
                        },
                        onPanEnd: (DragEndDetails e) {
                          //打印滑动结束时在x、y轴上的速度
                          print(e.velocity);
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.all(20.0),
                color: Colors.green,
                width: 400.0,
                height: 200.0,
                child: Stack(
                  children: <Widget>[
                    Text('单方向拖动'),
                    Positioned(
                      top: _top1,
                      left: 150.0,
                      child: GestureDetector(
                        child: CircleAvatar(child: Text("B")),
                        //垂直方向拖动事件
                        onVerticalDragUpdate: (DragUpdateDetails details) {
                          setState(() {
                            _top1 += details.delta.dy;
                          });
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Text(
                '缩放',
                style: TextStyle(color: Colors.blue, fontSize: 20.0),
              ),
              Container(
                padding: EdgeInsets.all(20.0),
                width: 400.0,
                child: Center(
                  child: GestureDetector(
                    //指定宽度，高度自适应
                    child: Image.asset(
                        "./assets/images/CustomScrollViewImage.jpg",
                        width: _width),
                    onScaleUpdate: (ScaleUpdateDetails details) {
                      setState(() {
                        //缩放倍数在0.8到10倍之间
                        _width = 200 * details.scale.clamp(.8, 10.0);
                      });
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void updateText(String text) {
    //更新显示的事件名
    setState(() {
      _operation = text;
    });
  }
}
